<!DOCTYPE html>
<html>
  <head>
    <title>YouFund</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div data-role="page" data-title="Home | YouFund" data-theme="c" id="home">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>



      <div data-role="navbar">
        <ul>
          <li><a href="#home" class="ui-btn-active ui-state-persist">Home</a></li>
          <li><a href="#fund">Fund</a></li>
          <li><a href="#pay">Pay</a></li>
        </ul>
      </div><!-- /navbar -->


      <div data-role="content">
        

          <div data-role="collapsible" data-collapsed="false" data-inset="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
            <h3>Account Summary</h3>
            <div>
              <img id="funding-source" src="images/serve logo.png" alt="Funding source logo" />
              <p>Balance: &pound;<span id="funded-balance"></span</p>
            </div>
          </div>
          <div id="virtual-currency-summary" data-role="collapsible" data-collapsed="false" data-inset="false" data-collapsed-icon="arrow-r" data-expanded-icon="arrow-d">
            <h3>Virtual Currency</h3>
            <div>
              <h5 id="scheme-name">&nbsp;</h5>
              <img src="./images/northlaines.png" alt="Currency logo" id="scheme-image" />
              <p>Balance: &pound;<span id="scheme-balance">100.00</span></p>
              <h5>Recent Transactions</h5>
              <table width="100%">
                <thead>
                  <tr>
                    <td width="20%">Date</td>
                    <td width="60%">Description</td>
                    <td width="20%">Amount</td>
                  </tr>
                </thead>
                <tbody>
                  <!-- Start transactions repeat -->
                  <tr>
                    <td>01/01/2013</td>
                    <td>Basketmakers Arms</td>
                    <td>+ &pound;15.17</td>
                  </tr>          
                  <tr>
                    <td>15/01/2013</td>
                    <td>Basketmakers Arms</td>
                    <td>+ &pound;15.17</td>
                  </tr>
                  <tr>
                    <td>20/01/2013</td>
                    <td>Basketmakers Arms</td>
                    <td>+ &pound;15.17</td>
                  </tr>
                </tbody>
              </table>
            </div>
            </div>
 

      </div><!-- /content -->



      <div data-role="footer" data-position="fixed" data-theme="c">
        <p>Copyright YouFund 2013</p>
      </div>

    </div><!-- /page -->

    <!-- /fund -->
    <div data-role="page" data-title="Fund | YouFund" data-theme="c" id="fund">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>

      <div data-role="navbar">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#fund" class="ui-btn-active ui-state-persist">Fund</a></li>
          <li><a href="#pay">Pay</a></li>
        </ul>
      </div><!-- /navbar -->

      <div data-role="content">
        <form action="#home" type="post" id="fund-form">
          <select data-native-menu="false" id="destination">
            <option>Choose Virtual Currency...</option>
            <option value="Lewes Pound">Lewes Pound</option>
            <option value="North Laines Pound">North Laines Pound</option>
          </select>
          <label for="slider-s">Amount (&pound;):</label>
          <input type="range" name="slider-s" id="slider-s" value="0" min="0" max="100" data-highlight="true" />
          <a href="#confirm-fund" data-role="button" data-rel="dialog" id="submit-currency">Fund!</a>
        </form>
      </div><!-- /content -->
      <div data-role="footer" data-position="fixed" data-theme="c">
        <p>Copyright YouFund 2013</p>
      </div>
    </div><!-- /page -->


    <!-- /confirm-fund -->
    <div data-role="page" data-theme="c" id="confirm-fund">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>
      <div data-role="content">
        <p>Confirm funding &pound;<span id="funding-amount"></span> to <span id="funding-destination"></span> currency?</p>
        <a href="#" data-rel="back" data-role="button" data-theme="a" data-inline="true">Cancel</a>
        <a href="#home" data-role="button" data-icon="check" data-inline="true" id="confirm-fund-button">Confirm</a>
        </div>
      </div><!-- /content -->
    </div><!-- /page -->

<div data-role="page" data-title="Pay | YouFund" data-theme="c" id="pay">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>


      <div data-role="navbar">
        <ul>
          <li><a href="#home">Home</a></li>
          <li><a href="#fund">Fund</a></li>
          <li><a href="#pay" class="ui-btn-active ui-state-persist">Pay</a></li>
        </ul>
      </div><!-- /navbar -->


      <div data-role="content" id="pay-details-screen">
      
           <h2>Confirm Payment <sub>to "<span class="merchant-name"></span>"</sub></h2>
           <h5>Sub total</h5>
           <h2>&pound;<span class="merchant-amount"></span></h2>
      
      
        <form action="#" type="post" id="pay-form">
          <label for="flip-1">Donate:</label>
          <select name="flip-1" id="flip-1" data-role="slider">
            <option value="off">No</option>
            <option value="on" selected="selected">Yes</option>
          </select> 
          <div id="slider-container">
          <label for="slider-2">Amount (&pound;):</label>
          <input type="range" name="slider-s" id="slider-2" value="25" min="0" max="100" data-highlight="true" />
</div>
          <h5>Total</h5>
           <h1>&pound;<span class="total-amount"></span></h1>
          <a href="#confirm-pay" id="submit-pay" data-role="button" data-rel="dialog">Pay!</a>
        </form>

      </div><!-- /content -->

      <div data-role="footer" data-position="fixed" data-theme="c">
        <p>Copyright YouFund 2013</p>
      </div>
    </div><!-- /page -->

    <!-- /confirm-pay -->
    <div data-role="page" data-theme="c" id="confirm-pay">
      <div data-role="header" data-theme="c">
        <h1><img src="./images/logo_293368_web.png" alt="YouFund" /></h1>
      </div>
      <div data-role="content">
        <p>Confirm pay &pound;<span class="total-amount"></span> to "<span class="merchant-name"></span>"?</p>
          <a href="#" data-rel="back" data-role="button" data-theme="a" data-inline="true">Cancel</a>
          <a href="#home" id="confirm-pay-button" data-role="button" data-icon="check" data-inline="true">Confirm</a>
        </div>
      </div><!-- /content -->
    </div><!-- /page -->


    <link rel="stylesheet" href="./jquery.mobile-1.3.1.min.css" />
    <link rel="stylesheet" href="./styles.css" />
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./jquery.mobile-1.3.1.min.js"></script>
    <script src="./functions.js"></script>
  </body>
</html>